<template>
  <view class="huakuai">
    <view style="display: flex;justify-content: flex-end;" v-if="getEditALL() && flagLister.length >0">
      <view v-debounce="piliangxinzeng" :class="pljudgment?'boxapl':'boxbpl'"
            style="width:180rpx ;text-align:center;height:50rpx;font-size: 26rpx;line-height:50rpx;border-radius: 10rpx;margin:15rpx 20rpx 15rpx 0;">
        批量申领
      </view>
    </view>
    <view class="table-td" v-for="(item,index) in flagLister" :key="index">
      <uni-collapse>
        <uni-collapse-item :show-arrow="type==='3'" :open="piliangBox">
          <template v-slot:title>
            <view class="chanshishuju">
              <view style="font-weight:bold;font-size: 30rpx" v-if="type === '2'">
                <text :selectable="true">站址编码：{{ item.siteId }}</text>
              </view>
              <view style="font-weight:bold;font-size: 30rpx">
                <text :selectable="true">物料编码：{{ item.categoryCode }}</text>
              </view>
              <view style="font-weight:bold;font-size: 30rpx">
                <text :selectable="true">物料名称：{{ item.categoryName }}</text>
              </view>
              <view style="display: flex;">
                <view style="color: #AFAEAC;font-size:27rpx;flex: 1">设计数量：
                  <text>{{ type === '3' ? item.totalAmount : item.amount }}</text>
                </view>
                <view style="color: #AFAEAC;font-size:27rpx;flex: 1" v-if="type!=='3'">可领用数量：
                  <text>{{ item.noReceiveAmount }}</text>
                </view>
                <view style="color: #AFAEAC;font-size:27rpx;flex: 1" v-if="type ==='3'">可领用数量：
                  <text>{{ item.totalNoReceiveAmount }}</text>
                </view>
              </view>
              <view style="display: flex;">
                <view class="chanshishuju-center" style="color: #AFAEAC;font-size:27rpx">
                  <text class="t1">累计申领数量：</text>
                  <text class="t2">{{
                      type === '3' ? item.totalSumReceiveAmount : item.sumReceiveAmount
                    }}
                  </text>
                </view>
                <view class="chanshishuju-center" style="color: #AFAEAC;font-size:27rpx">
                  <text class="t1">物资单价：</text>
                  <text class="t2">{{
                      item.price.includes(".") == true ? item.price : item.price + ".00"
                    }}
                  </text>
                </view>
              </view>
              <view v-if="piliangBox && type!== '3' && getEdit(item)"
                    style="display: flex;justify-content: flex-end;margin: 20rpx;width: 100%">
                <view style="display: flex;flex: 1;align-items: center;margin-left: -28rpx"
                      v-if="isNewbusinessCode==='2'">
                  <label class="common-list-title-ex" style="width: 60%">
                    按备电标准化成品申领 :</label>
                  <view class="footer-box__item" style="flex: 1;" v-if="item.isStand=='1'">
                    <picker @change="changeProductApply($event,index)" :value="item.productApplyIndex"
                            :range="productApplyArr" range-key="name" style="display: flex;">
                      <input class="uni-input product-apply" :value="item.selectedType" type="text"
                             @focus="aPickerFocus" style="border:2rpx solid rgba(228, 228, 228, 1);padding: 0 12rpx">
                    </picker>
                  </view>
                  <text class="footer-box__item" style="flex: 1;background-color: rgba(228, 228, 228, 1);padding: 0 12rpx" v-if="item.isStand=='0'">否</text>
                </view>
                <numberBox
                    v-model="item.receiveAmount"
                    :positiveInteger="false"
                    :integer="false"
                    :inputWidth="50"
                    :bg-color="bgColor"
                    :color="colortext"
                    :min="min"
                    :step="step"/>
              </view>
              <view v-if="!piliangBox && type!== '3' && getEdit(item)"
                    style="display: flex;justify-content: center;margin: 20rpx">
                <button style="width:180rpx ;height:50rpx;font-size: 26rpx;line-height: 50rpx" type="warn"
                        size="mini"
                        @click="jumpOrder(item,item.noReceiveAmount,item)">
                  物资申领
                </button>
                <button style="width:200rpx ;height:50rpx;font-size: 26rpx;line-height: 50rpx" type="warn"
                      size="mini"
                      v-if="showAdjustButton"
                      @click="adjustProject(item)">
                  跨项目调整
                </button>
              </view>
            </view>
          </template>
          <template v-if="type=== '3'">
            <view class="list-body" v-for="(v,i) in item.proList" :key="i">
              <view class="chanshishuju-center" style="color: #AFAEAC;font-size:27rpx">
                <text class="t1">单项工程编码：</text>
                <text class="t2">{{ v.prjcode }}</text>
              </view>
              <view class="chanshishuju-center" style="color: #AFAEAC;font-size:27rpx">
                <text class="t1">站址编码：</text>
                <text class="t2">{{ v.siteId }}</text>
              </view>
              <view class="chanshishuju-center" style="color: #AFAEAC;font-size:27rpx">
                <text class="t1">设计数量：</text>
                <text class="t2">{{ v.amount }}</text>
              </view>
              <view v-if="!piliangBox && prjInfo.isEdit === '1'"
                    style="display: flex;justify-content: center;margin: 20rpx">
                <button style="width:180rpx ;height:50rpx;font-size: 26rpx;line-height: 50rpx" type="warn"
                        size="mini"
                        @click="jumpOrder(item,item.totalNoReceiveAmount,v)">
                  物资申领
                </button>
                  <button style="width:200rpx ;height:50rpx;font-size: 26rpx;line-height: 50rpx" type="warn"
                          size="mini"
                          v-if="showAdjustButton"
                          @click="adjustProject(item)">
                      跨项目调整
                  </button>
              </view>
              <view v-if="piliangBox"
                    style="display: flex;justify-content: flex-end;margin: 20rpx;margin: 20rpx;width: 100%">
                <numberBox v-model="v.receiveAmount"
                           :inputWidth="50" :bg-color="bgColor"
                           :positiveInteger="false"
                           :color="colortext"
                           :integer="false"
                           :min="min"
                           :step="step"></numberBox>
              </view>
            </view>
          </template>
        </uni-collapse-item>
      </uni-collapse>
    </view>
    <!-- 提示 -->
    <view
        style="width: 100%;padding: 10rpx 0;text-align: center;background-color:#00000008; color:#737373 ;margin: 15rpx 0;">
      ---没有更多了---
    </view>
    <!-- 批量申领的提交/取消 -->
    <view class="click" v-if="nobutton">
      <view style="display: flex;justify-content: space-between;padding: 15rpx 20%;background-color:#00000010;">
        <view class="piliang-btn" v-debounce="()=>saveBtn()">提交</view>
        <view class="piliang-btn2" @click.stop="quxiao">取消</view>
      </view>
    </view>
    <view class="my-modal" v-if="modalShow">
      <view class="my-modal-con">
        <view style="width: 100%;text-align: center;margin-bottom: 20rpx">温馨提示</view>
        <view style="display: flex;align-items: center">
          <label class="common-list-title-ex" style="flex: 1">
            <text class="colorRed">*</text>
            计划领用时间 :</label>
          <view style="width: 65%;display: flex;background-color: white;margin-top: -6rpx;">
            <text space="ensp">{{ "  " }}</text>
            <image @click="calendarer" src="/static/imges/rili.png" mode=""
                   style="width: 26rpx;height: 26rpx;margin-top: 25rpx;"></image>
            <text space="ensp">{{ "  " }}</text>
            <u-input style="margin-top: 2rpx" @click="calendarer" v-model="jhlysj" :disabled="true"
                     placeholder="请选择相应的日期"/>
            <u-calendar v-model="dataTimeShow" :mode="mode" @change="changeDataTime" :min-date="shijan"
                        :max-date="maxshijan"
                        btn-type="error" active-bg-color="#EB4B4B"/>
          </view>
        </view>
        <view style="display: flex;margin: 20rpx 0">
          <label>请选择领料方式 :</label>
          <view style="width: 380rpx;text-align: left;padding-left: 24rpx">
            <input @click.stop="showSelectModal=!showSelectModal"
                   style="font-size: 28rpx;height: 50rpx;line-height: 50rpx;padding:0 20rpx;border:2rpx solid rgba(228, 228, 228);border-radius: 6rpx"
                   :value="applyTypeType" type="text" @focus="aPickerFocus">
            <view v-show="showSelectModal"
                  style="border:2rpx solid rgba(228, 228, 228);position: absolute;width: 356rpx;z-index: 9999;background-color: #FFFFFF"
                  class="selectBox">
              <view class="selectCell" style="padding:0 20rpx;" @click="changeApplyType(index)"
                    v-for="(item,index) in applyTypeArr" :key="index">{{ item.name }}
              </view>
            </view>
          </view>
        </view>
        <view>
          <label class="common-list-title-ex">
            <text class="colorRed">*</text>
            物资申领备注 :</label>
          <view style="background-color: #FFFFFF;padding: 20rpx;border: 2rpx solid rgba(228, 228, 228)">
          <textarea v-model="remark" placeholder="请填写备注" :count="true" maxlength="50"
                    style="background-color: #FFFFFF; height: 160rpx;font-size: 28rpx;"/>
          </view>
        </view>
        <view class="my-modal-btn">
          <view class="my-modal-btn-confirm" v-debounce="modalConfirm">提交</view>
          <view class="my-modal-btn-cancel" @click.stop="modalCancel">取消</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import NumberBox from "@/component/numberBox/u-number-box.vue";

export default {
  name: "applyForList",
  components: {NumberBox},
  props: {
    type: {
      type: String,
      default: ''
    },
    prjInfo: {
      type: Object,
      default: () => ({})
    },
    flagLister: {
      type: Array,
      default: () => []
    },
    isNewbusinessCode: {
      type: String,
      default: ''
    },
    showAdjustButton:{
      type: Boolean,
      default: false
    },
    manageMode:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pljudgment: true,
      nobutton: false,
      modalShow: false,
      productApplyArr: [
        {
          key: "1",
          name: "是"
        },
        {
          key: "0",
          name: "否"
        },
      ],
      step: 1,
      min: 0,
      bgColor: "#F2F3F5",
      colortext: "#EB4B4B",
      piliangBox: false,
      dataTimeShow: false,
      jhlysj: '', //批量计划时间
      shijan: "",
      mode: 'date',
      maxshijan: "2123-01-27",
      remark: '',
      showSelectModal: false,
      applyTypeType: '请选择',
      applyTypeCode: '',
      applyTypeArr: [
        {
          key: "1",
          name: "自提"
        },
        {
          key: "2",
          name: "配送"
        },
        {
          key: "3",
          name: "施工单位仓库"
        },
      ],
    }
  },
  mounted() {
    this.myDate();
  },
  methods: {
    getEdit(item){
      if(this.prjInfo.acceptcheck === '1'){
        return +this.prjInfo.isNewAcceptance === 1 && +item.jwMateReceive === 1
      }else{
        return this.prjInfo.isEdit === '1'
      }
    },
    getEditALL(){
      if(this.prjInfo.acceptcheck === '1'){
        let flag=this.flagLister.some((item)=> +this.prjInfo.isNewAcceptance === 1 && +item.jwMateReceive === 1)
        return flag
      }else{
        return this.prjInfo.isEdit === '1'
      }
    },
    adjustProject(item){
        this.$axios.get('/material/api/cableMateLabel/isCut',{ materialCode:item.categoryCode,prjId:this.prjInfo.prjId}).then((res)=>{
            if(res.data){
                uni.navigateTo({
                    url: './adjustProject?categoryCode=' + item.categoryCode +'&manageMode='+ this.manageMode+ '&prjInfo=' + encodeURIComponent(JSON.stringify(this.prjInfo)),
                });
            }else{
                uni.showModal({
                    title: "提示",
                    content: "当前电缆物理属性为固定形状，暂不支持发起跨项目调整操作!",
                    confirmColor: '#eb4b4b',
                    showCancel: false
                });
            }
        })
    },
    myDate() {
      let date = new Date();
      date.setDate(date.getDate());
      let yue = (date.getMonth() + 1 / 1) > 9 ? (date.getMonth() + 1 / 1) : ("0" + (date.getMonth() + 1 / 1));
      let geate = date.getDate();
      let str = date.getFullYear() + '-' + yue + '-' + geate;
      this.shijan = str;
    },
    // 批量申领
    piliangxinzeng() {
      this.$axios.get('/material/api/receive/equip/checkStatus', {prjId: this.prjInfo.prjId}).then(() => {
        this.pljudgment = false;
        this.nobutton = true;
        this.piliangBox = true;
      })
    },
    //选择框
    changeProductApply(e, index) {
      this.flagLister[index].productApplyIndex = e.detail.value;
      this.flagLister[index].selectedType = this.productApplyArr[e.detail.value].name
      this.flagLister[index].selectedCode = this.productApplyArr[e.detail.value].key
    },
    // 可领用数量点击
    jumpOrder(e, num, item) {
      if (Number(num) <= 0) {
        uni.showModal({
          title: "提示",
          content: "可领用数量为0不可进行申领操作",
          confirmColor: '#eb4b4b',
          showCancel: false
        });
      } else {
        this.$axios.get('/material/api/receive/equip/checkStatus', {prjId: this.prjInfo.prjId}).then(() => {
          uni.navigateTo({
            url: './outboundOrder?prjItem=' + encodeURIComponent(JSON.stringify(e)) + '&prjInfo=' + encodeURIComponent(JSON.stringify(this.prjInfo)) + '&type=' + this.type + '&isNewbusinessCode=' + this.isNewbusinessCode + "&item=" +
                encodeURIComponent(JSON.stringify(item)),
          });
        })
      }
    },
    saveBtn() {
      let that = this
      if (that.type == '3') {
        this.modalShow = true;
      } else {
        that.save();
      }
    },
    // 取消按钮
    quxiao() {
      this.pljudgment = true;
      this.nobutton = false;
      this.piliangBox = false;
      this.jhlysj = '';
      this.applyTypeCode = '';
      this.applyTypeType = '请选择';
      this.remark = '';
    },
    //打开时间选择器
    calendarer() {
      this.dataTimeShow = true;
    },
    aPickerFocus() {
      uni.hideKeyboard()
    },
    changeDataTime(e) {
      this.jhlysj = e.result
    },
    changeApplyType(e) {
      this.applyTypeType = this.applyTypeArr[e].name
      this.applyTypeCode = this.applyTypeArr[e].key
      this.showSelectModal = false;
      if(this.applyTypeArr[e].key==='1'){
        this.remark='物料自提，无需送货'
      }else if(this.applyTypeArr[e].key==='2'){
        this.remark='物料配送地址：'
      }else{
        this.remark=''
      }
    },
    modalConfirm() {
      this.save();
      this.modalShow = false;
    },
    modalCancel() {
      this.jhlysj = '';
      this.applyTypeCode = '';
      this.applyTypeType = '请选择';
      this.remark = '';
      this.modalShow = false;
    },
    //获取每一项精度校验结果
    getDesc(item) {
      let params = {
        materialCode: this.type == '3' ? item.categorycode : item.categoryCode,
        receiveAmount: item.receiveAmount,
        amountType: '1',
        siteId: item.siteId,
      }
      return this.$axios.post('/material/api/receive/equip/getSpuUnitAccByMaterialCode', params).then(() => {
        return Promise.resolve(item)
      }).catch(() => {
        return Promise.reject(item)
      })
    },
    //单站批量、整体接口一致，操作逻辑一致
    getApplyAxios(url, params) {
      let that = this
      this.$axios.post(url, params).then((res) => {
        uni.showModal({
          title: '提示',
          content: res.message,
          showCancel: false,
          confirmColor: '#eb4b4b',
          success: function (res1) {
            if (res1.confirm) {
              //刷新页面
              that.pljudgment = true;
              that.nobutton = false;
              that.piliangBox = false;
              that.$emit('changeList')
              that.jhlysj = '';
              that.remark = '';
              that.applyTypeCode = '';
              that.applyTypeType = '请选择';
            }
          }
        })
      })
    },
    getArrData(){
      let that = this
      let arr = [];
      //保证校验接口执行完毕再拿数据  判断每一项是否校验通过并删除多余变量
      that.flagLister.forEach((item) => {
        if(that.type==='3'){
          item.proList.forEach((v) => {
            if (v.receiveAmount !== "" && v.receiveAmount !== 0) {
              arr.push(that.getDesc(v))
            }
          })
        }else{
          if (item.receiveAmount !== "" && item.receiveAmount !== 0) {
            arr.push(that.getDesc(item))
          }
        }
      })
      return arr;
    },
    getCheckResultOne(arr){
      let status=[];
      arr.forEach((item) => {
        if (this.isNewbusinessCode == '2' && item.isStand == '1') {
          if (item.selectedCode) {
            item.isStandValue = item.selectedCode;
            status.push(true)
          } else {
            uni.showModal({
              title: '提示',
              content: "请选择按备电标准化成品申领",
              showCancel: false,
              confirmColor: '#eb4b4b',
            })
            status.push(false)
          }
        }
      })
      return status.some(item=>!item);
    },
    getCheckResultFirst(arr){
      let that=this;
      let params;
      if(this.type!=='3'){
        let flag = this.getCheckResultOne(arr);
        if(!flag){
          let array = arr.map((item) => {
            return {
              amount: item.amount,
              backAmount: item.backAmount,
              categoryCode: item.categoryCode,
              categoryName: item.categoryName,
              dwjl: item.dwjl,
              ifSourceCode: item.ifSourceCode,
              isStand: item.isStand,
              isStandValue: item.isStandValue,
              noReceiveAmount: item.noReceiveAmount,
              osAmount: item.osAmount,
              osRealAmount: item.osRealAmount,
              price: item.price,
              receiveAmount: item.receiveAmount,
              retreatAmount: item.retreatAmount,
              siteId: item.siteId,
              siteName: item.siteName,
              spuMainName: item.spuMainName,
              subPrjId: item.subPrjId,
              sumReceiveAmount: item.sumReceiveAmount,
              unit: item.unit,
            }
          })
          params = {
            prjInfo: {
              adjId: that.prjInfo.adjId,
              applyType: "1",
              note: '',
              planTime: "",
              prjId: that.prjInfo.prjId,
            },
            applys: array
          }
          that.getApplyAxios("/material/api/receive/equip/doSaveApplyBySite", params);
        }
      } else{
        let array = arr.map((item) => {
          return {
            amount: item.amount,
            canReceive: item.canReceive,
            categoryCode: item.categorycode,
            categoryName: item.categoryname,
            dwjl: item.dwjl,
            ifSourcecode: item.ifSourceCode,
            iftwodecimals: item.iftwodecimals,
            oldPrice: item.oldprice,
            prjCode: item.prjcode,
            prjId: item.prjid,
            receiveAmount: item.receiveAmount,
            siteAddress: item.siteAddress,
            siteId: item.siteId,
            spuMainName: item.spuMainName,
            subprjId: item.subprjId,
            unit: item.unit
          }
        })
        params = {
          prjInfo: {
            adjId: that.prjInfo.adjId,
            applyType: that.applyTypeCode || '1',
            note: that.remark,
            planTime: that.jhlysj,
            prjId: that.prjInfo.prjId,
          },
          applys: array
        }
        that.getApplyAxios("/material/api/receive/equip/addApplyDetail", params);
      }
    },

    async getCheckResult() {
      let arr = this.getArrData();

      if (arr.length) {
        try {
          arr = await Promise.all(arr)
          this.getCheckResultFirst(arr);

        } catch (e) {
        }
      }
    },
    getChecked(){
      if (this.type !== '3') {
        //存在已填写数据
        let flag = this.flagLister.some((item)=>item.receiveAmount != 0)
        return !flag;
      } else {
        let status=[];
        this.flagLister.forEach((item)=>{
          if(item.proList){
            let flag = item.proList.some((i)=>i.receiveAmount != 0)
            status.push(flag);
          }
        })
        let a=status.some(statusItem=>statusItem);
        return !a;
      }
    },
    getCheckOne(checked){
      return new Promise((resolve,reject) => {
        if (checked) {
          uni.showModal({
            title: '提示',
            content: "请至少输入一个申领数量",
            showCancel: false,
            confirmColor: '#eb4b4b',
          })
          reject('fail')
        }else{
          resolve('success')
        }
      });
    },
    getCheckTwo(){
      return new Promise((resolve,reject) => {
        if (this.jhlysj == "") {
          uni.showModal({
            title: '温馨提示',
            content: "请输入计划领用时间",
            showCancel: false,
            confirmColor: '#eb4b4b',
          })
          reject('fail')
        }else{
          resolve('success')
        }
      });
    },
    getCheckThree(){
      return new Promise((resolve,reject) => {
        if (this.remark == "") {
          uni.showModal({
            title: '温馨提示',
            content: "请输入申领备注",
            showCancel: false,
            confirmColor: '#eb4b4b',
          })
          reject('fail')
        }else{
          resolve('success')
        }
      });
    },
    // 批量提交
    async save() {
      let that = this
      let checked = this.getChecked()
      // for (let i = 0; i < that.flagLister.length; i++) {
      //   if (that.type !== '3') {
      //     if (that.flagLister[i].receiveAmount != 0) {
      //       checked = false
      //     }
      //   } else {
      //     if (that.flagLister[i].proList) {
      //       for (let j = 0; j < that.flagLister[i].proList.length; j++) {
      //         if (that.flagLister[i].proList[j].receiveAmount != 0) {
      //           checked = false
      //         }
      //       }
      //     }
      //   }
      // }
      // if (checked) {
      //   uni.showModal({
      //     title: '提示',
      //     content: "请至少输入一个申领数量",
      //     showCancel: false,
      //     confirmColor: '#eb4b4b',
      //   })
      //   return;
      // }
      await this.getCheckOne(checked);

      if (that.type == '3') {
        // if (that.jhlysj == "") {
        //   uni.showModal({
        //     title: '温馨提示',
        //     content: "请输入计划领用时间",
        //     showCancel: false,
        //     confirmColor: '#eb4b4b',
        //   })
        //   return;
        // }
        await this.getCheckTwo();
        await this.getCheckThree();
        // if (that.remark == "") {
        //   uni.showModal({
        //     title: '温馨提示',
        //     content: "请输入申领备注",
        //     showCancel: false,
        //     confirmColor: '#eb4b4b',
        //   })
        //   return;
        // }
      }

      uni.showModal({
        title: '提示',
        content: "是否确认提交",
        confirmColor: '#eb4b4b',

        success: function (res) {
          if (res.confirm) {
            that.getCheckResult();
          }
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/common/common-ui.css";

.huakuai {
  padding-top: 80rpx;
  width: 100%;
  height: 100%;

  .boxapl {
    background-color: #EB4B4B;
    color: white;
  }

  .boxbpl {
    background-color: white;
    color: #717171;
    border: 2rpx rgba(121, 121, 121, 1) solid;
  }

  .table-td {
    width: 98%;
    margin: auto;
    margin-bottom: 6rpx;
    border-radius: 20rpx;
    overflow: auto;
    background-color: white;
    color: black;
    text-align: left;
    padding: 0;
    display: flex;

    .iconBtn {
      width: 30rpx;
      margin-left: 20rpx;
      margin-top: 60rpx;
    }

    .chanshishuju {
      padding: 10rpx 4%;
      width: 100%;

      .chanshishuju-center {
        display: flex;
        width: 100%;
        color: #000000c1;

        .t1 {
          white-space: nowrap;
        }
      }

      .chanshishuju-buttom {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }

    .list-body {
      width: 100%;
      padding: 10rpx 5% 10rpx 80rpx;
      background-color: #00000010;

      .chanshishuju-center {
        display: flex;
        width: 100%;
        color: #737373;

        .t1 {
          white-space: nowrap;
        }
      }

    }
  }

}

.click {
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 0;
  background-color: #ffffff;
  text-align: center;

  .piliang-btn {
    width: 100rpx;
    line-height: 50rpx;
    text-align: center;
    height: 50rpx;
    font-size: 28rpx;
    background-color: rgb(235, 75, 75);
    color: #FFFFFF;
    border-radius: 10rpx;

  }

  .piliang-btn2 {
    text-align: center;
    margin: 0 20rpx;
    width: 100rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: rgb(235, 75, 75);
    border: 1px solid rgb(235, 75, 75);
    border-radius: 10rpx;
  }
}

.my-modal {
  height: 100%;
  width: 100%;
  background-color: rgba(58, 58, 58, 0.5);
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .my-modal-con {
    height: 640rpx;
    width: 90%;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx
  }

  .my-modal-btn {
    display: flex;
    margin-top: 40rpx;
    justify-content: space-evenly;

    .my-modal-btn-confirm {
      width: 100rpx;
      text-align: center;
      height: 50rpx;
      font-size: 28rpx;
      background-color: rgb(233, 75, 75);
      color: #FFFFFF;
      border-radius: 10rpx
    }

    .my-modal-btn-cancel {
      width: 100rpx;
      text-align: center;
      height: 50rpx;
      font-size: 28rpx;
      color: rgb(233, 75, 75);
      border: 1px solid rgb(235, 75, 75);
      border-radius: 10rpx
    }
  }
}
</style>